﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.11.0/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .navbar {
            display: none;
        }
    </style>
</head>

<body>
    <form class="layui-form" id="permissionForm" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">套餐名称*</label>
            <div class="layui-input-block" style="width:300px">
                <input type="text" name="PackageName" id="PackageName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">套餐图片:</label>
                <div class="layui-input-inline layui-input-wrap">
                    <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                        <i class="layui-icon layui-icon-upload"></i> 图片上传
                    </button>
                    <div style="width: 132px;">
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                            <div id="ID-upload-demo-text"></div>
                            <div class="layui-progress" id="upload-progress-bar">
                                <div class="layui-progress-bar" lay-percent="0%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">套餐类型</label>
            <div class="layui-input-block" style="width:300px">
                <select name="CourseDescription" id="CourseDescription" lay-filter="aihao">
                    <option value="0">请选择</option>
                    <option value="男性套餐">男性套餐</option>
                    <option value="女性套餐">女性套餐</option>
                    <option value="老人套餐">老人套餐</option>
                    <option value="入职套餐">入职套餐</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">所属院区</label>
            <div class="layui-input-block" style="width:300px">
                <select name="ApplicableToHospitals" id="ApplicableToHospitals" lay-filter="aihao">
                    <option value="0">请选择</option>
                    <option value="湘南院区">湘南院区</option>
                    <option value="东园">东园</option>
                    <option value="西院">西院</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">套餐项目</label>
            <div class="layui-input-block" style="width:300px">
                <select name="PackageType" id="PackageType" lay-filter="aihao">
                    <option value="0">请选择</option>
                    <option value="一般检查$1000">一般检查$1000</option>
                    <option value="普通检查$1000">普通检查$1500</option>
                    <option value="高级检查$1000">高级检查$2000</option>
                </select>
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">套餐价格</label>
            <div class="layui-input-block" style="width:300px">
                <input type="text" name="PackagePrice" id="PackagePrice" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">套餐介绍</label>
            <div class="layui-input-block">
                <textarea name="Packages" id="Packages" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">注意事项</label>
            <div class="layui-input-block">
                <textarea name="Precautions" id="Precautions" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item" pane>
            <label class="layui-form-label">套餐状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="Offerstatus" id="Offerstatus" lay-skin="switch" lay-filter="switchTest">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="addPermission">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.11.0/dist/layui.js"></script>
    <script>
        $(document).ready(function () {
            // 移除手动绑定的点击事件
            // $('#ID-upload-demo-btn').on('click', function () {
            //     $('#PackageImgInput').click();
            // });

            // 移除监听文件选择事件
            // $('#PackageImgInput').on('change', function (e) {
            //     var file = e.target.files[0];
            //     if (file) {
            //         var reader = new FileReader();
            //         reader.onload = function (e) {
            //             $('#PackageImagePreview').attr('src', e.target.result);
            //         };
            //         reader.readAsDataURL(file);
            //     }
            // });
        });

        layui.use(['form', 'layer'], function () {
            var form = layui.form;
            var layer = layui.layer;

            form.on('submit(addPermission)', function (data) {
                // 创建 FormData 对象
                var pdata = {
                    PackageName: $("#PackageName").val(),
                    ApplicableToHospitals: $("#ApplicableToHospitals").val(),
                    PackageType: $("#PackageType").val(),
                    PackagePrice: $("#PackagePrice").val(),
                    Precautions: $("#Precautions").val(),
                    Packages: $("#Packages").val(),
                    CourseDescription: $("#CourseDescription").val(),
                    Offerstatus: $("#Offerstatus").prop('checked'),
                    PackageImg: window.uploadedImageUrl
                };

                // 打印要发送的数据
                console.log('发送的数据:', pdata);

                // 发送 Ajax 请求
                $.ajax({
                    //url: 'https://localhost:7027/api/HealthCheckPackage/AddHealthCheckPackage',
                     url: `@ViewBag.BaseUrl/T6/HealthCheckPackage/AddHealthCheckPackage`,
                    data: JSON.stringify(pdata),
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (res) {
                        if (res.code === 100) {
                            layer.msg('添加成功');
                            $('#permissionForm')[0].reset();
                        } else {
                            layer.msg(res.msg);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        layer.msg(`请求出错: ${textStatus} - ${errorThrown}`);
                        console.error('请求出错:', jqXHR, textStatus, errorThrown);
                    }
                });

                return false;
            });
        });

        layui.use(['form', 'layer', 'laydate', 'upload'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var upload = layui.upload;
            var $ = layui.$;

            // 初始化日期选择器
            laydate.render({
                elem: '#date'
            });

            // 图片上传配置
            upload.render({
                elem: '#ID-upload-demo-btn',
                url: 'https://localhost:7239/api/File/UploadFile',
                type: 'POST',
                accept: 'images', // 只接受图片文件
                exts: 'jpg|png|gif|bmp|jpeg', // 允许的图片格式
                size: 2048, // 限制图片大小为 2MB
                before: function (obj) {
                    // 显示进度条
                    $('#upload-progress-bar').show();
                    obj.preview(function (index, file, result) {
                        $('#ID-upload-demo-img').attr('src', result);
                    });
                },
                done: function (res) {
                    console.log(res);
                    if (res.code === 100) {
                        layer.msg('图片上传成功');
                        $('#ID-upload-demo-img').attr('src', res.data);
                        // 将上传成功的图片地址存储到全局变量，以便表单提交时使用
                        window.uploadedImageUrl = res.data;
                    } else {
                        layer.msg('图片上传失败');
                    }
                },
            });
        });
    </script>
    <input type="file" id="PackageImgInput" style="display: none;">
</body>
</html>    